<template>
	<div>
		<keep-alive>
			<router-view v-if="$route.meta.keepAlive"></router-view>
		</keep-alive>
		<router-view v-if="!$route.meta.keepAlive"></router-view>
		<div class="audio">
			<p>{{currentSong.song}}&nbsp;&nbsp;&nbsp;&nbsp;演唱者：{{currentSong.singer}}</p>
			<audio :src="currentSong.url" autoplay="" controls=""> </audio>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//播放数据
				currentSong: {
					url: "./static/audio/南屏晚钟(天籁之战)-华晨宇+苏诗丁.mp3",
					singer: "华晨宇、苏诗丁",
					song: "南屏晚钟(天籁之战)"
				},
			};
		},
		methods: {}
	}
</script>

<style lang="less" scoped>
	.audio {
		position: fixed;
		width: 100%;
		height: 90px;
		bottom: 0;
		background: #F1F3F4;

		p {
			height: 36px;
			text-align: center;
			line-height: 36px;
			margin: 0 31px;
			overflow-x: scroll;
			white-space: nowrap;
		}

		audio {
			width: 100%;
		}
	}
</style>
